社内イベント『 DevelopersIO ブログ勉強会2023 #5 』で登壇させていただきました！〜Figmaでアイキャッチが簡単に作れる！〜
こんにちは！アシスタントデザイナーのくぼです！
クラスメソッド社内イベント『 DevelopersIO ブログ勉強会2023 #5 』でお話しさせていただきました！
アイキャッチはFigmaで簡単に作れまっせ！を紹介しました。また、アイキャッチを作成する上でデザイナーが配慮しているポイントについても触れています。
今回の記事ははこちらの登壇内容について紹介します！
『DevelopersIO ブログ勉強会 2023』の趣旨や経緯、背景
社内イベントとして展開している『DevelopersIO ブログ勉強会 2023』の趣旨や経緯、背景などに関しては下記エントリを御参照ください。
Figmaでアイキャッチが簡単に作れる！
今回は自分でアイキャッチを作る時に、なんのツールを使えばいいの？どんなことに気をつけて作ったらいいかわからない！という方向けです。Figma便利だよ〜、このポイントは抑えておこうね〜、といった内容になります。
Figmaってどんなツール？
Figmaのいいところを4つ挙げてみました！
ブラウザ上で使用できるので、MacやWindows関係ありません！また、URLを共有するだけで共同で編集が可能なので、コラボレーションに特化したデザインツールとも言われています。
イラレやフォトショと違い、フリープランもあるので気軽に始められるのも良いところですね！イラレやフォトショはもちろん専門的なデザインツールなのでできることの幅は断然広いですが、Figmaもある程度必要な機能は揃っているしメニューもそこまで難しくなく使えるかと思います。
ぜひこの機会にFifmaを始めてみてはいかがでしょうか！
Fimgaでアイキャッチが簡単に作れる
それでは早速作っていきましょう！
今回作り方を紹介するのはロゴを配置したアイキャッチです。DevIOは技術の発信がほとんどなので、紹介するサービスのロゴアイキャッチに使用するケースがとても多いためこちらを題材とします。
やること自体は大きく分けて3つしかありません！とっても簡単ですね！
①Figmaページ上にフレームを作成する
まず、フレームを作成しましょう！ショートカットキーは「a」です！
アイキャッチのサイズはDevIOでは1200×630pxの決まりがありますので、そのサイズで作成しましょう。
ショートカットキー「a」をクリックすると右パネルからサイズを選択できます！ソーシャルメディアのFacebook投稿が1200×630pxなのでそちらを選択しても良いです。
または、カスタムで設定します。作成したフレームをクリックで選択して、右パネルから数値を入力することでフレームサイズを変更できます！
フレームができたら命名しましょう。デフォルトではFlame[数字]と名前がつきます。
このフレーム名が保存した際のファイル名になりますので忘れず変えておきましょうね！やり方は、フレームの左上、または左のパネルのフレーム名をダブルクリックで文字入力できます。
②ロゴを配置する
フレームができたらロゴを配置します。使用するロゴデータを使用する前に注意点があります！
1つ目は必ず使用前にガイドラインに目を通すことです。著作権を侵害してしまうことのないよう必ず確認してください！
2つ目は必ず最新のロゴを使用することです。公式だからと確認せずに使用し、実は新しいロゴが出ていた！なんてことがあるかもしれません…！情報発信記事のアイキャッチが古いロゴを使ってしまうと、古い記事なのかな？と思われてしまいます！
必ずこの2点を事前に確認しましょうね。
拡張子については、ロゴはほとんどの場合ベクターでの素材が用意されています。拡大縮小しても画質が悪くなったりしないためです。そのため、ベクターデータを優先して使うようにしましょう！
ロゴデータの準備ができたらFigmaにアップロードしましょう！
ロゴを真ん中配置したらアイキャッチのデータは完成です！やったー！
最後に保存して完成です！
③エクスポートする（PNGで保存する）
FigmaはデフォルトではPNGで保存となります。右下のボタンから保存可能です！
もし、PNG以外で書き出したい場合は拡張子横のトグルアイコンから変更できます。また、他の拡張子でも保存した場合にもプラスアイコンをクリックで追加されるので同時に複数の拡張子での保存が可能です！
PDFは左上から右下に配置してあるフレームの位置の順で書き出しされますので要注意です！
以上の3ステップでアイキャッチ作成は完了です！なんて簡単なんだ！！！
ここにプラス、注意するとさらにGood!なポイントを2点ご紹介いたします！
アイキャッチを作る時の重要なポイント
ロゴを配置するのみのシンプルなアイキャッチを作る時でも、配慮すべきポイントが2点あります！
①アイソレーション（余白）
ロゴには周囲に要素を何も入れてはいけないアイソレーションエリア（余白）の規定が定められていることがほとんどです。
多くの場合、ガイドラインに記載がありますので必ず確認します！
クラメソロゴのアイソレーションエリアはロゴ高さの4分の1です。
上の画像はアイソレーションエリアを確保し、フレームのギリギリまで大きくして配置しました！ロゴがとても大きいですね…！
下の画像はアイソレーションエリアの2倍を確保して配置しました。まだ大きいですが…ギリギリOKな最低限をクリアしたラインでしょうか…！
どちらもアイソレーションエリアの確保はされていますが、フレーム内に配置する際の周囲の余白のとこは考えられておりません！アイソレーションエリアの確保＋周囲との余白を取れるとGoodです！（これを考慮した上でアイソレーションエリアを大きく確保したロゴも中にはありますので、ガイドラインを確認しつつ必要に応じて余白を足すことを検討してみてください！）
アイソレーションエリアのこと考えるの難しいよ！！という方向けにご紹介。フレームの周囲160pxの範囲内にロゴを収めると綺麗に見えますよ！
ロゴの形によっては例外もありますが、この範囲内に入れておくと大きすぎず、小さすぎず、綺麗な見栄えになります！
また、アイソレーションが設けられていない・ガイドラインに記載がないロゴについてもこの範囲内に入れておくと良いかと思います！
横置き、縦置きそれぞれ形の異なるロゴも、160pxの範囲内に配置してみます。どうでしょうか？ある程度綺麗に見えるのではないでしょうか？
アイソレーションエリアを確保して、綺麗な見た目で作成することを心がけましょう！
どうして余白がないとダメなの？？という疑問を持たれている方もいるかもしれません。これはやはり「見栄えが悪いから」という答えになるかと思います。
重要なのは「見栄え」がどこに繋がるの？です！
アイキャッチの余白がある・ないで受ける印象はどの程度変わるでしょうか？
隣との距離も近くみえ、詰まっているように感じませんか？
記事の中身が一番大切なのは当然なのですが、プラスで見え方・与える印象にも気を配れるととても親切かと思います！記事の中身もいい！扱う画像も美しいものが作れる！そんな安心感・信頼感を与えられること間違いなしですね！？！？
②目の錯覚
次に紹介するのが目の錯覚です。ロゴの形によっては、フレームの中心に配置しているのに中心に見えない！！なんて現状が起こります。
これら2つを見比べたとき、数値上の中心に置いたものは少し下がって見えるのではないでしょうか？
この目の錯覚を解消するために少し上に配置したのが下の画像です。
このように人間の目には錯覚が存在するので、人間の目で見た微調整が必要です！
代表的な目の錯覚をご紹介します！【三角分割錯覚】をご存知でしょうか？
人間の目はものを掴んだり使ったりする上で、そのものの重心を把握することが重要です。そのため無意識に目の前にあるものの重心を探す習性があるのです！
数値上の真ん中に捉われず、最後には自分の目で見て調整ができるとVery Good!です！
アイソレーションや目の錯覚については、デザイナーの杉山さんがこちらの記事内で丁寧に記載してくださっているので、ぜひ読んでみてください！
まとめ
おまけ
デザイナーが使っているフリーイラストサイトをご紹介します！
どれもとっても便利なのでぜひ使ってみてください！
最後に
登壇資料はこちらです！
最後までお読みいただきありがとうございました！ぜひアイキャッチ作ってみてください！
ぜひご活用いただけると嬉しく思います！
